<template>
<canvas ref="elCanvas" :width="detail.style.position.w" :height="detail.style.position.h">
Your browser does not support the HTML5 canvas tag.
</canvas>    
</template>

<script>
import canvasView from './ViewCanvas';

export default {
    name: 'ViewRect',
    extends: canvasView,
    methods: {
        drawRect(x, y, width, height, radius, color, type) {
            var el = this.$refs.elCanvas;
            var ctx = el.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(x, y + radius);
            ctx.lineTo(x, y + height - radius);
            ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
            ctx.lineTo(x + width - radius, y + height);
            ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
            ctx.lineTo(x + width, y + radius);
            ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
            ctx.lineTo(x + radius, y);
            ctx.quadraticCurveTo(x, y, x, y + radius);
            ctx[type + 'Style'] = color;
            ctx.closePath();
            ctx[type]();
        },
        onResize() {            
            var w = this.detail.style.position.w;
            var h = this.detail.style.position.h;
            var el = this.$refs.elCanvas;
            var ctx = el.getContext("2d");
            ctx.clearRect(0, 0, w, h);
            var radius = this.detail.style.radius? this.detail.style.radius:0;
            var color = this.getForeColor();
            this.drawRect(4, 4, w - 8, h - 8, radius, color, 'fill');         
        }
    },
    mounted() {
        this.onResize();
        
        
        if(this.editMode == false) {
            var _this = this;
            var i = 0;
            debugger
            this.SimpleEventBus.on("first-event",function(msg){
                if(msg % 2) {
                    _this.detail.style.foreColor = "blue";
                } else {
                    _this.detail.style.foreColor = "red";
                }
                _this.onResize();                
            });
            //这里模拟服务器发送消息
            setInterval(() => {
                this.SimpleEventBus.emit('first-event', i);
                i++;
            }, 500);
        }
    }
}
</script>
